<%-- 
    Document   : cooking
    Created on : Feb 23, 2013, 1:16:28 PM
    Author     : Vrety
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>

<style media="all" type="text/css">

    #foodEssential {width:210px;height:110px;padding:20px;border:1px solid #aaaaaa;}
    #foodNoEssential {width:210px;height:110px;padding:20px;border:1px solid #aaaaaa;}

    .searchFoodDiv{

        overflow:auto;
        height:600px;
        width: 500px;
    }
    .resultDishDiv{

        overflow:auto;
        height:600px;
        width: 500px;
    }

</style>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Vào bếp</title>

        <script>
             function showDish(){
                var xmlhttp;
                var txt,x,i;
                var url = "ShowDishServlet";
                // var splitresult = localStorage.dish.split(";");
                var dishID = localStorage.dish;
                var params = "dishid="+dishID ;

                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {

                    }
                }
                xmlhttp.open("POST",url,true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send(params);

            }
            function loadXMLDoc(dname)
            {
                if (window.XMLHttpRequest)
                {
                    xhttp=new XMLHttpRequest();
                }
                else
                {
                    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhttp.open("GET",dname,false);
                xhttp.send("");
                return xhttp.responseXML;
            }

            function loadXMLFood()
            {
                var foodName = document.getElementById('foodName').value
                //alert(foodName);
                var xmlhttp;
                var txt,x,i;
                var url = "AjaxSearchFoodServlet";
                
                var params = "foodName="+foodName;
                
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        var xml =xmlhttp.responseXML;
                        //var xml =  loadXMLDoc("${pageContext.request.contextPath}/xml/Foods.xml");
                        var xsl = loadXMLDoc("${pageContext.request.contextPath}/xml/Foods.xsl");
                        xsltProcessor=new XSLTProcessor();
                        xsltProcessor.importStylesheet(xsl);

                        resultDocument = xsltProcessor.transformToFragment(xml,document);
                        //remove content
                        while(document.getElementById("foodList").firstChild){
                            document.getElementById("foodList").removeChild(document.getElementById("foodList").firstChild);
                        }
                        //add content
                        document.getElementById("foodList").appendChild(resultDocument);

                        // document.getElementById("foodList").innerHTML=txt;
                        // document.write(xmlDoc.transformNode(xsl));
                    }
                }
                xmlhttp.open("GET",url+"?"+params,true);
                xmlhttp.send();
            }
            function searchDish()
            {
                var xmlhttp;
                var txt,x,i;
                var url = "AjaxSearchDishServlet";

                //var params = "foodID="+foodID +"&"+"imageURL="+imageURL +"&" +"isEssential=" +isEssential;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        //  alert(xmlhttp.responseText);

                        //var $response=$(xmlhttp.responseText);
                        // var html = $(xmlhttp.responseText);
                        // var body = html.find("#choppingBoard");
                        //alert(body);
                        document.getElementsByTagName('html')[0].innerHTML = xmlhttp.responseText;
                        loadXMLFood();
                        //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("POST",url,true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send(null);
            }
            function resetFood()
            {
                var xmlhttp;
                var txt,x,i;
                var url = "AjaxResetStoreFoodServlet";

                // var params = "foodID="+foodID +"&"+"imageURL="+imageURL +"&" +"isEssential=" +isEssential;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {                        
                        document.getElementsByTagName('html')[0].innerHTML = xmlhttp.responseText;
                        loadXMLFood();
                    }
                }
                xmlhttp.open("POST",url,true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send(null);

            }
            function viewDetail(ev)
            {
                var dishID = ev.target.id;
                var xmlhttp;
                var txt,x,i;
                var url = "ViewDishDetailServlet";

                var params = "dishID="+dishID ;
                localStorage.dish = dishID;
                showDish();
                 
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {          
                        // alert(xmlhttp.responseText);
                        var url = xmlhttp.responseText;
                        TheNewWin = window.open(url);
                    }
                }
                xmlhttp.open("POST",url,true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send(params);

            }

            function allowDrop(ev)
            {
                ev.preventDefault();
            }

            function drag(ev)
            {
                ev.dataTransfer.setData("foodID",ev.target.id);
                ev.dataTransfer.setData("imageURL",ev.target.name);

            }
            function dragDish(ev)
            {
                ev.dataTransfer.setData("dishID",ev.target.id);
            }
            function drop(ev)
            {
                ev.preventDefault();
                var foodID =ev.dataTransfer.getData("foodID");
                var imageURL =ev.dataTransfer.getData("imageURL");
                var isEssential =ev.target.id;
                //alert(isEssential);

                var xmlhttp;
                var txt,x,i;
                var url = "AjaxStoreFoodServlet";

                var params = "foodID="+foodID +"&"+"imageURL="+imageURL +"&" +"isEssential=" +isEssential;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        //  alert(xmlhttp.responseText);

                        //var $response=$(xmlhttp.responseText);
                        // var html = $(xmlhttp.responseText);
                        // var body = html.find("#choppingBoard");
                        //alert(body);
                        
                        document.getElementsByTagName('html')[0].innerHTML = xmlhttp.responseText;
                        loadXMLFood();
                        //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("POST","AjaxStoreFoodServlet",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send(params);
               
            };
            
        </script>

    </head>
    <body >
        <jsp:include page="homeHeader.jsp"/>
        <div id="test" align="center" >
            <form id="frmSearchFood" >
                Food Name: <input type="text" name="txtFoodNameCus"  id="foodName" onkeyup="loadXMLFood()" />
                <input type="button" class="btn-primary" value="SearchFood" name="btnActionAjax" id="btnSearchFood"
                       onclick="loadXMLFood()"/>
            </form>
        </div>
        <table  id="ajxDspId"  >
            <tr>
                <td >
                    <div id="foodList" class="searchFoodDiv">
                        <h2>Danh sách thực phẩm </h2>
                    </div>
                </td>
                <td>

                    <h3><b>Nguyên Liệu Chính</b></h3>
                    <div id="foodEssential"  ondrop="drop(event)"
                         ondragover="allowDrop(event)">
                        <c:if  test="${not empty sessionScope.foodEssential}">
                            <c:forEach var="storeFood" items="${sessionScope.foodEssential}" >
                                <img id="0${storeFood.foodID}" name="${storeFood.imageURL}" alt=""  src="${pageContext.request.contextPath}/images/food/${storeFood.imageURL}" width="60" height="60"
                                     draggable="true"  ondragstart="drag(event)" />
                            </c:forEach>
                        </c:if>
                    </div>

                    <h3> Nguyên Liệu Phụ</h3>
                    <div id="foodNoEssential"  ondrop="drop(event)"
                       
                         ondragover="allowDrop(event)">
                        <c:if  test="${not empty sessionScope.foodNoEssential}">
                            <c:forEach var="storeFood" items="${sessionScope.foodNoEssential}" >
                                <img id="0${storeFood.foodID}" name="${storeFood.imageURL}" alt=""  src="${pageContext.request.contextPath}/images/food/${storeFood.imageURL}" width="60" height="60"
                                     draggable="true"  ondragstart="drag(event)" />
                            </c:forEach>
                        </c:if>
                    </div>
                    <input type="button" class="btn-primary" value="Tìm thức ăn" name="btnSearchDishCooking" id="btnSearchDishCooking" onclick="searchDish()" />
                    <input type="button" class="btn-primary" value="Chọn lại" name="btnResetFood" id="btnResetFood" onclick="resetFood()" />
                </td>

                <td>
                    <div class="resultDishDiv">
                        <h2>Danh sách món ăn </h2>
                        <c:choose>
                            <c:when test="${empty sessionScope.simpleList }">
                            </c:when>
                            <c:otherwise>

                                <table border="1" style="width: 70%">
                                    <!-- column headers -->
                                    <tr bgcolor="#9acd32">
                                        <th>Tên Món Ăn</th>
                                        <th>Hình Ảnh</th>
                                    </tr>
                                    <!-- column data -->
                                    <c:forEach var="dish" items="${sessionScope.simpleList}">
                                        <tr>
                                            <td>${dish.dishName}</td>
                                            <td>
                                                <img alt=""  src="${pageContext.request.contextPath}/images/dish/${dish.imageURL}" width="60" height="60"
                                                     id="${dish.dishID}"
                                                     name="${dish.imageURL}"
                                                     onclick="viewDetail(event)"
                                                     />
                                            </td>
                                        </tr>
                                    </c:forEach>

                                </table>
                            </c:otherwise>

                        </c:choose>
                    </div>

                </td>

            </tr>

            <tr>

            </tr>
        </table>

    </body>
</html>